<template>
  <!-- 印章管理 -->
  <div class="SealAdminBusiness">
    <div
      class="padding15All flexbetween"
      style="
        height: 50px;
        box-sizing: border-box;
        border-bottom: 2px solid #f5f6f7;
      "
    >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>印章管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="small" type="primary" @click="addSeal('company')"
          >新增企业印章</el-button
        >
        <el-button size="small" type="primary" @click="addSeal('legalPerson')"
          >新增法定代表人章</el-button
        >
      </div>
    </div>
    <div class="padding15All">
      <el-form
        ref="sealFormRef"
        :model="sealForm"
        inline
        label-position="left"
        size="small"
      >
        <el-form-item label="印章类型" prop="sealType">
          <el-select v-model="sealForm.sealType" placeholder="请选择">
            <el-option label="用户手绘章" value="1"></el-option>
            <el-option label="用户模板章" value="2"></el-option>
            <el-option label="企业章" value="3"></el-option>
            <el-option label="合同章" value="4"></el-option>
            <el-option label="法人章" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSealForm">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageGetEnterpriseSealList"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="padding15All tableMain">
      <el-table
        ref="sealTableRef"
        v-loading="sealTabLoading"
        :data="sealTableData"
        tooltip-effect="dark"
      >
        <el-table-column label="印章图片" prop="sealImg">
          <template slot-scope="scope">
            <el-image
              :preview-src-list="scope.row.srcList"
              :src="scope.row.sealImg"
              style="width: 80px; height: 80px"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="印章名称" prop="typeTxt"> </el-table-column>
        <el-table-column label="印章类型" prop="type">
          <template slot-scope="scope">
            <span>{{ scope.row.type | sealTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="sealAuthorization(scope.row.sealId)"
              >授权印章权限</el-button
            >
            <el-button
              type="text"
              @click="
                sealAuthorizationInfo(scope.row.sealId, scope.row.typeTxt)
              "
              >查看授权
            </el-button>
            <el-button type="text" @click="delSeal(scope.row.sealId)"
              >删除印章</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages padding15All flexright">
      <el-pagination
        :current-page="sealTableCurrentPage"
        :page-size="sealTablePageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="sealTableCurrentTotal"
        layout="sizes, total, prev, pager, next, jumper"
        @size-change="sealTableSizeChange"
        @current-change="sealTableCurrentChange"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="sealAuthorizationDialogVisible"
      title="授权印章权限"
      width="50%"
      @close="sealAuthorizationDialogCancel"
    >
      <el-radio-group
        v-model="sealUseType"
        size="small"
        @input="getSealUseType"
      >
        <el-radio-button label="0">添加印章使用员</el-radio-button>
        <el-radio-button label="1">添加印章审批员</el-radio-button>
      </el-radio-group>
      <el-alert
        :closable="false"
        class="margin-top1"
        show-icon
        title="请选择【添加印章使用员】或【添加印章审批员】任一"
        type="info"
      >
      </el-alert>
      <div v-show="sealUseType === '0'" class="padding15All">
        <el-form
          ref="sealFormModel1Ref"
          :model="sealFormModel1"
          inline
          label-position="left"
          size="small"
        >
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model="sealFormModel1.userName"
              placeholder="请输入员工姓名"
            />
          </el-form-item>
          <el-form-item label="账号" prop="userPhone">
            <el-input
              v-model="sealFormModel1.userPhone"
              placeholder="请输入员工账号"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSealFormModel1">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSealUseTableData1"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="sealUseTableData1Ref"
          v-loading="sealUseTableLoading1"
          :data="sealUseTableData1"
          highlight-current-row
          size="small"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="姓名(昵称)" prop="user_name">
          </el-table-column>
          <el-table-column label="大鸿签帐号" prop="user_phone">
          </el-table-column>
          <el-table-column label="角色" prop="enterprise_user_type">
            <template slot-scope="scope">
              <span>{{
                scope.row.enterprise_user_type === 1 ? "管理员" : "员工"
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="padding15All flexright">
          <el-pagination
            :current-page="sealUseTableCurrentPage1"
            :page-size="sealUseTablePageSize1"
            :page-sizes="[10, 20, 30, 40]"
            :total="sealUseTableTotal1"
            layout="sizes, total, prev, pager, next, jumper"
            @size-change="sealUseTableSizeChange1"
            @current-change="sealUseTableCurrentChange1"
          >
          </el-pagination>
        </div>
      </div>
      <div v-show="sealUseType === '1'" class="padding15All">
        <el-form
          ref="sealFormModel2Ref"
          :model="sealFormModel2"
          inline
          label-position="left"
          size="small"
        >
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model="sealFormModel2.userName"
              placeholder="请输入员工姓名"
            />
          </el-form-item>
          <el-form-item label="账号" prop="userPhone">
            <el-input
              v-model="sealFormModel2.userPhone"
              placeholder="请输入员工账号"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSealFormModel2">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSealUseTableData2"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="sealUseTableData2Ref"
          v-loading="sealUseTableLoading2"
          :data="sealUseTableData2"
          highlight-current-row
          size="small"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="姓名(昵称)" prop="user_name">
          </el-table-column>
          <el-table-column label="大鸿签帐号" prop="user_phone">
          </el-table-column>
          <el-table-column label="角色" prop="enterprise_user_type">
            <template slot-scope="scope">
              <span>{{
                scope.row.enterprise_user_type === 1 ? "管理员" : "员工"
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="padding15All flexright">
          <el-pagination
            :current-page="sealUseTableCurrentPage2"
            :page-size="sealUseTablePageSize2"
            :page-sizes="[10, 20, 30, 40]"
            :total="sealUseTableTotal2"
            layout="sizes, total, prev, pager, next, jumper"
            @size-change="sealUseTableSizeChange2"
            @current-change="sealUseTableCurrentChange2"
          >
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="sealAuthorizationDialogCancel"
          >取 消</el-button
        >
        <el-button
          :loading="sealUseLoading"
          size="small"
          type="primary"
          @click="sealAuthorizationDialogConfirm"
          >确 定
        </el-button>
      </div>
    </el-dialog>

    <!--    <el-dialog :visible.sync="dialogTableVisible" title="组织成员列表" width="660px">
          <el-col :span="12">
            <div class="flexbetween">
              <el-input
                v-model="form.a"
                placeholder="输入手机号/名称搜索"
                size="small">
              </el-input>
              <el-button size="small" type="primary">查询</el-button>
            </div>
          </el-col>

          <el-table :data="tableData" max-height="250px">
            <el-table-column
              type="selection"
              width="">
            </el-table-column>
            <el-table-column label="姓名" property="a" width=""></el-table-column>
            <el-table-column label="大鸿签账号" property="a" width=""></el-table-column>
            <el-table-column label="角色" property="a" width=""></el-table-column>
          </el-table>

          <div class="flexright padding15top">
            <el-pagination
              :current-page.sync="currentPage2"
              :page-size="1"
              :page-sizes="[100, 200, 300, 400]"
              :total="1"
              layout="sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="close1">取 消</el-button>
            <el-button type="primary" @click="close1">选 择</el-button>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogTemplateVisible" title="选择模板" width="660px">
          <el-row>
            <el-col :span="16">
              <div class="flexbetween">
                <el-input
                  v-model="form.a"
                  placeholder="输入手机号/名称搜索"
                  size="small">
                </el-input>
                <el-button size="small" type="primary">查询</el-button>
              </div>
            </el-col>
          </el-row>


          <el-row class="flexcenter padding15top">
            <el-col :span="24">
              <div class="templateList">
                <div class="listInfo">
                  <el-checkbox v-model="checked1" border label="备选项1">
                    <p>合同模板1</p>
                    <p>更新时间：2023-04-24 09:19</p>
                  </el-checkbox>
                </div>
              </div>
            </el-col>
          </el-row>

          <div slot="footer" class="dialog-footer">
            <el-button @click="close2">取 消</el-button>
            <el-button type="primary" @click="close2">选 择</el-button>
          </div>
        </el-dialog>-->
  </div>
</template>

<script>
import {
  addSealApproval,
  addSealUser,
  deleteSeal,
  getEnterpriseSealList,
  getEnterpriseUserList,
} from "@/api/business";

export default {
  data() {
    return {
      enterpriseId: localStorage.getItem("companyid") | "",
      sealForm: {
        sealType: null,
      },
      sealTableData: [],
      sealTabLoading: false,
      sealTableCurrentPage: 1,
      sealTablePageSize: 10,
      sealTableCurrentTotal: 0,
      sealAuthorizationDialogVisible: false,
      sealUseType: "0",

      sealUseTableData1: [],
      sealUseTableLoading1: false,
      sealUseTableCurrentPage1: 1,
      sealUseTablePageSize1: 10,
      sealUseTableTotal1: 1,
      multipleSelection1: [],
      sealFormModel1: {
        userName: null,
        userPhone: null,
      },

      sealUseTableData2: [],
      sealUseTableLoading2: false,
      sealUseTableCurrentPage2: 1,
      sealUseTablePageSize2: 10,
      sealUseTableTotal2: 1,
      multipleSelection2: [],
      sealFormModel2: {
        userName: null,
        userPhone: null,
      },

      currentSealId: null,
      sealUseLoading: false,
    };
  },
  mounted() {
    this.init();
  },
  filters: {
    sealTypeFilter(val) {
      switch (val) {
        case 1:
          return "用户手绘章";
        case 2:
          return "用户模板章";
        case 3:
          return "企业章";
        case 4:
          return "合同章 ";
        case 5:
          return "法人章";
        default:
          return "无";
      }
    },
  },
  methods: {
    init() {
      this.pageGetEnterpriseSealList();
    },
    pageGetEnterpriseSealList() {
      this.sealTabLoading = true;
      getEnterpriseSealList({
        sealType: this.sealForm.sealType,
        signEnterpriseId: this.enterpriseId,
      }).then((res) => {
        this.sealTabLoading = false;
        this.sealTableData = res.result.list;
        this.sealTableCurrentTotal = res.result.list.total;
        this.sealTableData.forEach((item) => {
          if (item.sealImg) {
            item.srcList = [item.sealImg];
          }
        });
      });
    },
    getSealUseTableData1() {
      this.sealUseTableLoading1 = true;
      getEnterpriseUserList({
        enterpriseId: this.enterpriseId,
        pageNum: this.sealUseTableCurrentPage1,
        pageSize: this.sealUseTablePageSize1,
        powerType: 2,
        sealId: this.currentSealId,
        ...this.sealFormModel1,
      }).then((res) => {
        this.sealUseTableLoading1 = false;
        this.sealUseTableData1 = res.result.List;
        this.sealUseTableTotal1 = res.result.totel;
        this.$nextTick(() => {
          this.sealUseTableData1.forEach((item) => {
            if (item.type === 2) {
              this.$refs.sealUseTableData1Ref.toggleRowSelection(item);
            }
          });
        });
      });
    },
    getSealUseTableData2() {
      this.sealUseTableLoading2 = true;
      getEnterpriseUserList({
        enterpriseId: this.enterpriseId,
        pageNum: this.sealUseTableCurrentPage2,
        pageSize: this.sealUseTablePageSize2,
        sealId: this.currentSealId,
        powerType: 1,
        ...this.sealFormModel2,
      }).then((res) => {
        this.sealUseTableLoading2 = false;
        this.sealUseTableData2 = res.result.List;
        this.sealUseTableTotal2 = res.result.totel;
        this.$nextTick(() => {
          this.sealUseTableData2.forEach((item) => {
            if (item.type === 1) {
              this.$refs.sealUseTableData2Ref.toggleRowSelection(item);
            }
          });
        });
      });
    },
    resetSealForm() {
      this.$refs.sealFormRef.resetFields();
      this.pageGetEnterpriseSealList();
    },
    sealTableSizeChange(e) {
      this.sealTablePageSize = e;
    },
    sealTableCurrentChange(e) {
      this.sealTableCurrentPage = e;
    },
    sealAuthorization(id) {
      this.currentSealId = id;
      this.getSealUseTableData1();
      this.sealAuthorizationDialogVisible = true;
    },
    sealAuthorizationInfo(id, name) {
      this.$router.push({ name: "impoweList", query: { name, id } }, () => {});
    },
    addSeal(type) {
      this.$router.push({ name: "addSeal", query: { type } }, () => {});
    },
    delSeal(id) {
      this.$alert("确定删除么", "删除印章", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        showCancelButton: true,
        callback: (action) => {
          if (action === "confirm") {
            deleteSeal({ id }).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.message);
                this.pageGetEnterpriseSealList();
              }
            });
          }
        },
      });
    },
    sealAuthorizationDialogCancel() {
      this.sealAuthorizationDialogVisible = false;
      this.resetSealFormModel1();
      this.resetSealFormModel2();
      this.$refs.sealUseTableData1Ref.clearSelection();
      this.$refs.sealUseTableData2Ref.clearSelection();
      this.sealUseType = "0";
    },
    setAddSealUser(userIds) {
      this.sealUseLoading = true;
      addSealUser({
        sealId: this.currentSealId,
        signEnterpriseId: this.enterpriseId,
        userIds,
      }).then((res) => {
        this.sealUseLoading = false;
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.sealAuthorizationDialogCancel();
        }
      });
    },
    setAddSealApproval(userIds) {
      this.sealUseLoading = true;
      addSealApproval({
        sealId: this.currentSealId,
        signEnterpriseId: this.enterpriseId,
        userIds,
      }).then((res) => {
        this.sealUseLoading = false;
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.sealAuthorizationDialogVisible = false;
          this.sealAuthorizationDialogCancel();
        }
      });
    },
    sealAuthorizationDialogConfirm() {
      if (this.sealUseType === "0") {
        let userIds = [];
        this.multipleSelection1.forEach((item) => {
          userIds.push(item.user_id);
        });
        // 使用
        this.setAddSealUser(userIds.toString());
      } else if (this.sealUseType === "1") {
        let userIds = [];
        this.multipleSelection2.forEach((item) => {
          userIds.push(item.user_id);
        });
        // 审批
        this.setAddSealApproval(userIds.toString());
      }
    },
    getSealUseType(name) {
      if (name === "0") {
        this.$refs.sealUseTableData1Ref.clearSelection();
        this.getSealUseTableData1();
      }
      if (name === "1") {
        this.$refs.sealUseTableData2Ref.clearSelection();
        this.getSealUseTableData2();
      }
    },
    sealUseTableSizeChange1(e) {
      this.sealUseTablePageSize1 = e;
    },
    sealUseTableCurrentChange1(e) {
      this.sealUseTableCurrentPage1 = e;
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    sealUseTableSizeChange2(e) {
      this.sealUseTablePageSize1 = e;
    },
    sealUseTableCurrentChange2(e) {
      this.sealUseTableCurrentPage1 = e;
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    resetSealFormModel1() {
      this.$refs.sealFormModel1Ref.resetFields();
    },
    resetSealFormModel2() {
      this.$refs.sealFormModel2Ref.resetFields();
    },
  },
};
</script>

<style lang="scss">
.SealAdminBusiness {
  .el-radio__input.is-checked + .el-radio__label {
    span {
      color: #333;
    }
  }

  .el-radio__label {
    span {
      display: block;
      margin-left: 30px;
      color: #b9b9bb;
      font-size: 12px;
    }
  }

  .el-checkbox.is-bordered {
    height: auto;
    display: flex;
    align-items: center;
  }
}
</style>

<style lang="scss" scoped>
.sealAdmin {
  height: 100%;
  position: relative;

  .pages {
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0;
    border-top: 2px solid #f5f6f7;
  }

  .templateList {
    height: 400px;
    overflow-y: scroll;
  }
}
</style>